<template>
  <div class="add_dialog" id="add_dialog">
    <form class="layui-form" action="" lay-filter="formTeacherFilter">
      <div class="layui-row">
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">驾驶员编号</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="driverCode"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">驾驶员名称</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="driverName"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">驾驶证号</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="driverLicNum"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-col-xs12">
            <div class="layui-form-item">
              <label class="layui-form-label">发证单位</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="issueUnit"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">有效起始日期</label>
            <div class="layui-input-inline layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
              </div>
              <input
                type="text"
                name="validFrom"
                id="validFrom"
                lay-verify="date"
                placeholder="请选择"
                autocomplete="off"
                class="layui-input input-100"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">有效结束日期</label>
            <div class="layui-input-inline layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
              </div>
              <input
                type="text"
                name="effectiveEndDate"
                id="effectiveEndDate"
                lay-verify="date"
                placeholder="请选择"
                autocomplete="off"
                class="layui-input input-100"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">身份证号码</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="idCard"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">准架车型</label>
            <div class="layui-input-inline">
              <select name="approvedDrivingModel">
                <option value=""></option>
                <option value="A1">A1</option>
                <option value="A2">A2</option>
                <option value="B1">B1</option>
                <option value="B2">B2</option>
                <option value="C1">C1</option>
                <option value="C2">C2</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">领证日期</label>
            <div class="layui-input-inline layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
              </div>
              <input
                type="text"
                name="certificateIssuanceDate"
                id="certificateIssuanceDate"
                lay-verify="date"
                placeholder="请选择"
                autocomplete="off"
                class="layui-input input-100"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">归管部门</label>
            <div class="layui-input-inline" id="department-style">
              <!-- <input
                name="belongingDept"
                type="text"
                id="tree1"
                lay-filter="tree2"
                class="layui-input"
              /> -->
              <input
                name="belongingDept"
                type="text"
                id="tree2"
                lay-filter="tree2"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs12">
          <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
              <textarea
                name="remark"
                placeholder="请输入"
                class="layui-textarea"
              ></textarea>
            </div>
          </div>
        </div>
        <div class="layui-col-xs12">
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button
                type="button"
                class="layui-btn"
                lay-submit
                lay-filter="submit_table"
              >
                提交
              </button>
              <button
                type="reset"
                class="layui-btn layui-btn-primary reset_from"
                style="display: none"
              >
                取消
              </button>
              <button type="button" class="layui-btn layui-btn-primary cancel">
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
export default {
  methods: {
    echoData(departmentId) {
      window.layui.use(["form", "treeSelect"], async () => {
        this.treeSelect = window.layui.treeSelect;
        // 树形下拉组件
        this.treeSelect.render({
          // 选择器
          elem: "#tree2",
          // 数据
          data:
            process.env.VUE_APP_BASE_API +
            '/service-hrm/hrm-organization/query-nodes?isLoadAllDescendants=1&targetType="com"',
          // 异步加载方式：get/post，默认get
          type: "post",
          headers: {
            Authorization: "Bearer " + this.token,
          },
          style: {
            folder: {
              // 父节点图标
              enable: true, // 是否开启：true/false
            },
            line: {
              // 连接线
              enable: true, // 是否开启：true/false
            },
          },
          // 占位符
          placeholder: "请选择",
          // 是否开启搜索功能：true/false，默认false
          search: true,
          // 加载完成后的回调函数
          success: (d) => {
            //             // 选中节点，根据id筛选
            if (departmentId) {
              this.treeSelect.checkNode("tree2", departmentId);
              const dom = document.querySelectorAll(
                "#department-style .layui-treeSelect"
                );
                dom[dom.length - 1].remove();
            }else {
              this.treeSelect.checkNode("tree2", null);
              const dom = document.querySelectorAll('#department-style .layui-treeSelect')
              dom[dom.length - 1].remove()
            }
          },
        });
      });
    },
  },
};
</script>
<style scoped></style>

<style scoped lang="scss">
.add_dialog {
  padding: 12px;
  .layui-form-label {
    width: 100px;
  }
  .layui-input {
    width: 80%;
    &.input-91 {
      width: 91.5%;
    }
    &.input-100 {
      width: 100%;
    }
  }
  .layui-textarea {
    width: 92%;
  }
  .layui-upload-drag {
    padding-top: 10px;
    width: 160px;
    height: 50px;
  }
  .layui-upload-drag .layui-icon {
    font-size: 35px;
  }
  .layui-input-inline {
    width: 222px;
  }
  .basic_info {
    position: relative;
    margin-left: 22px;
    font-size: 16px;
    color: #141313;
  }
}
</style>
